<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <!-- <h1>我是index.html</h1> -->
   <div id="app"></div>
  <script src="/xuni/bundle.js"></script>
  <script>
    // 只有单词变量 - 最简单版本
/*     let templateStr2 = `我爱{{somebody}},{{somebody}}也爱我,我考了{{a.b.c}}分`
    let data2 = {
      somebody: "唐开放",
      a:{
        b:{
          c:'100'
        }
      }
    }; */



    // 解决.的识别
/*     let templatePoint = `<div>
         <ol>
             {{#students}}
             <li>
                 {{.}}
             </li>
             {{/students}}
         </ol>
     </div>`
    let dataPoint = {
      students: ['小强','小放']
    } */
    
        // 单数组,无二层数组.
/*     let templateStr1 = `<div>
        <ol>
            {{#students}}
            <li>
                学生{{name}}的基本信息:
                <p>性别：{{sex}}</p>
                <p>年龄：{{age}}</p>
            </li>
            {{/students}}
        </ol>
    </div>`;
    let data1 = {
      students: [
        {
          name: "小明",
          age: 12,
          sex: '男',
          // hobbies: ["打篮球", "看书", "旅游"],
        },
        {
          name: "小红",
          age: 11,
          sex: '女',
          // hobbies: ["打游戏", "看电影"],
        },
        {
          name: "小强",
          age: 13,
          sex: '男',
          // hobbies: ["打游戏", "看电影"],
        },
      ],
    }; */

    // 有循环模板,并且有.
        let templateStr1 = `<div>
        <ol>
            {{#students}}
            <li>
                学生{{name}}的爱好是
                <ol>
                    {{#hobbies}}
                    <li>{{.}}</li>
                    {{/hobbies}}
                </ol>
            </li>
            {{/students}}
        </ol>
    </div>`;
     let data1 = {
      students: [
        {
          name: "小明",
          age: 12,
          sex: '男',
          hobbies: ["打篮球", "看书", "旅游"],
        },
        {
          name: "小红",
          age: 11,
          sex: '女',
          hobbies: ["打游戏", "看电影"],
        },
        {
          name: "小强",
          age: 13,
          sex: '男',
          hobbies: ["打游戏", "看电影"],
        },
      ],
    };


    let domstr=  SSG_TEMPLATE.render(templateStr1, data1);
    let dom =   document.getElementById('app');
    dom.innerHTML = (domstr)
  </script>
</body>

</html>